<!-- DynamicNavbar.vue -->
<script setup>
import {ref, onMounted, computed} from 'vue';

const props = defineProps({
  links: {
    type: Array,
    default: () => []
  }
});
const userInfo = ref({ role: '', name: '' });

onMounted(() => {
  const user = localStorage.getItem('user');
  if (user) {
    userInfo.value = JSON.parse(user);
  }
});

const roleDisplay = computed(() => {
  const role = {
    'administrator': '管理员',
    'waiter': '前台服务员',
    'manager': '经理'
  };
  return role[userInfo.value.role] || '未知';
});

</script>

<template>
  <nav class="navbar">
    <ul>
      <li v-for="link in props.links" :key="link.name" class="nav-item">
        <router-link :to="link.to" class="nav-link">{{ link.name }}</router-link>
      </li>
    </ul>
    <!-- 显示用户信息 -->
    <div class="user-info">
      <ul>
        <li class="nav-item">{{ roleDisplay }} - {{ userInfo.name }}</li>
        <li class="nav-item"><router-link to="/" class="nav-link">退出登录</router-link></li>
      </ul>
    </div>
  </nav>
</template>

<style scoped>
ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;

  /*border: 1px solid black;*/
  overflow: hidden;
}

li {
  float: left;
  /*border: 1px solid black;*/
}


a:hover:not(.active) {

}

.active {
  background-color: #4CAF50;
}

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #372e4a;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.nav-item {
  padding-right: 10px;
  padding-left: 10px;
}
.user-info {
  padding: 10px;
  font-weight: bold;
}
.nav-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.nav-link:hover {
  text-decoration: underline;
}
</style>
